<template>
<el-container>
    <template v-if="route.meta.showMenu">
        <app-menu />
        <el-container style="display: flex; flex-direction: column;">
        <el-main>
            <app-header />

            <transition name="fade-transform" mode="out-in">
            <keep-alive>
                <router-view v-if="route.meta.keepAlive"></router-view>
            </keep-alive>
            </transition>
            <transition name="fade-transform" mode="out-in">
                <router-view v-if="route.meta.keepAlive"></router-view>
            </transition>

            <router-view />
        </el-main>
        </el-container>
    </template>

    <transition name="fade-transform" mode="out-in" v-else>
      <router-view></router-view>
    </transition>
  
</el-container>
    
</template>

<script setup lang='ts'>
import { computed,ComputedRef } from 'vue'
import useStore from '@/store/menu'
import {useRoute} from 'vue-router';
import appHeader from './app-header.vue';
import appMenu from './app-menu.vue';

const route = useRoute();
const store = useStore();

const showMenu:ComputedRef<Boolean> = computed(() => store.showMenu);
</script>


<style scoped>
.el-container {
  height: 100%;
}

.el-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  background-color: #f5f7f9;
  overflow: hidden;
}
</style>